<template>
	<van-cell-group>
		<van-nav-bar title="更改手机号" left-arrow  @click-left="back" />
		<CheckPhone ref="checkPhone" :display="step_1" :callback="checkPhone"></CheckPhone>
		<CheckCode  ref="bindPhone" :display="step_2" :prev="toCheckPhone" btnText="手机号更改" sendurl="/home/account/send/bind/phonecode" :callback="bindPhone"></CheckCode>
	</van-cell-group>
</template>
<script>
import { NavBar,CellGroup} from 'vant';

import CheckPhone from 'touch/components/auth/checkphone';
import CheckCode from 'touch/components/auth/checkcode';

export default{
	props: {
        callback:{
            type: Function,
        },
        popup :{
        	type : Boolean,
        	default : false
        }
    },
	components :{
    	[NavBar.name] : NavBar,
    	[CellGroup.name] : CellGroup,
    	CheckPhone,
		CheckCode,
	},
	data () {
		return {
			step_1 : false,
            step_2 : false,
            step_3 : false,
		}
	},
	methods:{
		//发送手机验证码组件返回上一步
		toCheckPhone(){
    		this.step_1 = true;
    		this.step_2 = false;
    	},
    	//验证手机号
		checkPhone(form){
			this.Axios.Home.Account.CheckPhone(form)
            .then(res =>{
            	if(!res) return false;
            	this.step_1 = false;
            	this.step_2 = true;
            	this.$refs.bindPhone.form.phone = this.$refs.checkPhone.form.phone;
            	this.$refs.bindPhone.form.phonekey = res.data.phonekey;
            })
		},
		//验证手机验证码
		bindPhone(form){
			this.Axios.Home.Account.BindPhone(form)
            .then(res =>{
            	if(!res) return false;
            	this.back();
            })
		},
		back(){
			this.step_1 = false;
        	this.step_2 = false;
        	if (this.popup) {
        		this.callback();
        	}else{
        		window.history.go(-1);
        	}
        },
        init(){
        	this.step_1 = true;
        	this.step_2 = false;
        }
	},
}
</script>
